<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.18/dist/css/layui.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/axios.js"></script>
    <style>
        main {
            margin: 100px;
            display: flex;
            justify-content: center;
            align-items: end;
        }

        .layui-upload-drag {
            width: 200px;
            margin: 0 50px;
        }

        .reset, .random, .delete {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background: rgba(192, 192, 255, 0.9);
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
        }

        .list {
            width: 800px;
            margin: 30px auto;
            padding: 1px;
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #000;
        }

        li {
            width: 90px;
            height: 30px;
            padding: 0 3px;
            font-size: 14px;
            border: 1px solid #000;
            text-align: center;
            margin: 1px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
        }

        .ok {
            width: 100px;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
        }

        .delete {
            width: 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<main>
    <div class="reset">重置</div>
    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
        <div class="layui-hide" id="ID-upload-demo-preview">
            <hr>
        </div>
    </div>
    <div class="random">随机</div>
</main>
<h1 class="ok"></h1>
<ul class="list">
    <li sid="1"><span>天才</span><span>0</span></li>
    <li sid="2"><span>天才</span><span>0</span></li>
    <li sid="3"><span>天才</span><span>0</span></li>
    <li sid="4"><span>天才</span><span>0</span></li>
    <li sid="5"><span>天才</span><span>0</span></li>
    <li sid="6"><span>天才</span><span>0</span></li>
</ul>
<div class="delete">清空全部</div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.18/dist/layui.js"></script>
<script>
    reload()

    async function reload() {
        let res = await axios({
            url: 'http://182.92.211.184:1257/student/reload'
        })
        console.log(res)
        let str = ''
        res.data.data.forEach(item => {
            str += `<li sid="${item.id}"><span>${item.name}</span></li>`
        })
        $('.list').html(str)
    }

    layui.use(function () {
        var upload = layui.upload;
        var $ = layui.$;
        upload.render({
            elem: '#ID-upload-demo-drag',
            url: 'http://182.92.211.184:1257/student/upload',
            method: 'post',
            accept: 'file',
            done: function () {
                reload()
            }
        });
        var count = 0;
        let id = 0
        $('.random').on('click', async () => {
            let name = $('.list').children()
            let time = setInterval(() => {
                let size = $('li').length
                let n = parseInt(Math.random() * size)
                $('li').css('background', 'white')
                $('li')[n].style.background = 'blue'
                let ok = $('li')[n].innerHTML
                count++
                console.log(count)
                if (count > 20) {
                    $('.ok').html(ok)
                    id = n
                    fn()
                    count = 0
                    clearInterval(time)
                }
            }, 300)
            setTimeout(() => {
                reload()
            }, 2000)
        })

        $('.reset').on('click', async () => {
            let res = await axios({
                url: 'http://182.92.211.184:1257/student/reset'
            })
            $('.ok').html('')
            reload()
        })
        $('.delete').on('click', async () => {
            let res = await axios({
                url: 'http://182.92.211.184:1257/student/delete'
            })
            $('.ok').html('')
            reload()
        })

        async function fn() {
            if (count > 20) {
                let a = $('.list').children()
                let res = await axios({
                    url: "http://182.92.211.184:1257/student/random",
                    params: {
                        'id': a[id].getAttribute("sid"),
                    }
                })
                reload()
            }
        }
    });


</script>

</body>
</html>